<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Positive Negative Bars</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">Positive Negative Bars</p>
<hr class="separator">
<div class="content">
<img src="images/posnegbar.png" width='500' height='320'>
<br><br>
This example demonstrates a bar chart containing positive and negative data, represented by different colors.<br><br>
In this example, the two colors of the plot area background are configured using background zones, while the bar colors are configured by splitting the bars into two layers.<br><br>
<ul><li> Use <a href="XYChart.addBarLayer2.htm">XYChart.addBarLayer2</a> with <a href="Chart.Overlay.htm">Overlay</a> to add an overlay bar layer to the chart.<br><br>
<li> Use <a href="ArrayMath.selectGEZ.htm">ArrayMath.selectGEZ</a> to select the data values greater than or equal to zero and use <a href="Layer.addDataSet.htm">Layer.addDataSet</a> to add them as the blue data set.<br><br>
<li> Use <a href="ArrayMath.selectLTZ.htm">ArrayMath.selectLTZ</a> to select the data values less than zero and use <a href="Layer.addDataSet.htm">Layer.addDataSet</a> to add them as the orange data set.<br><br>
<li> Use <a href="Layer.yZoneColor.htm">Layer.yZoneColor</a> to create a y-zone color, which is blue for y &gt;= 0 and orange for y &lt; 0, and use <a href="Layer.setAggregateLabelStyle.htm">Layer.setAggregateLabelStyle</a> to apply it as the bar label color.<br><br>
<li> Use <a href="Axis.addZone.htm">Axis.addZone</a> to add two background zones for y &gt;= 0 and y &lt; 0.</ul>
</div>
<p class="heading1a">Source Code Listing</p>
<div class="content">
<b>[JSP Version]</b> jspdemo/posnegbar.jsp
<div class='codeblock'><code class='pre'>&lt;%@page import="ChartDirector.*, java.util.*" %&gt;
&lt;%
// The data for the bar chart
double[] data = {-6.3, 2.3, 0.7, -3.4, 2.2, -2.9, -0.1, -0.1, 3.3, 6.2, 4.3, 1.6};

// The labels for the bar chart
String[] labels = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov",
    "Dec"};

// Create a XYChart object of size 500 x 320 pixels
XYChart c = new XYChart(500, 320);

// Add a title to the chart using Arial Bold Italic font
c.addTitle("Productivity Change - Year 2005", "Arial Bold Italic");

// Set the plotarea at (50, 30) and of size 400 x 250 pixels
c.setPlotArea(50, 30, 400, 250);

// Add a bar layer to the chart using the Overlay data combine method
BarLayer layer = c.addBarLayer2(Chart.Overlay);

// Select positive data and add it as data set with blue (6666ff) color
layer.addDataSet(new ArrayMath(data).selectGEZ(null, Chart.NoValue).result(), 0x6666ff);

// Select negative data and add it as data set with orange (ff6600) color
layer.addDataSet(new ArrayMath(data).selectLTZ(null, Chart.NoValue).result(), 0xff6600);

// Add labels to the top of the bar using 8 pt Arial Bold font. The font color is configured to be
// red (0xcc3300) below zero, and blue (0x3333ff) above zero.
layer.setAggregateLabelStyle("Arial Bold", 8, layer.yZoneColor(0, 0xcc3300, 0x3333ff));

// Set the labels on the x axis and use Arial Bold as the label font
c.xAxis().setLabels(labels).setFontStyle("Arial Bold");

// Draw the y axis on the right of the plot area
c.setYAxisOnRight(true);

// Use Arial Bold as the y axis label font
c.yAxis().setLabelStyle("Arial Bold");

// Add a title to the y axis
c.yAxis().setTitle("Percentage");

// Add a light blue (0xccccff) zone for positive part of the plot area
c.yAxis().addZone(0, 9999, 0xccccff);

// Add a pink (0xffffcc) zone for negative part of the plot area
c.yAxis().addZone(-9999, 0, 0xffcccc);

// Output the chart
WebChartViewer viewer = new WebChartViewer(request, "chart1");
viewer.setChart(c, Chart.SVG);

// Include tool tip for the chart
viewer.setImageMap(c.getHTMLImageMap("", "", "title='{xLabel}: {value}%'"));
%&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Positive Negative Bars&lt;/title&gt;
    &lt;!-- Include ChartDirector Javascript Library to support chart interactions --&gt;
    &lt;script type="text/javascript" src="cdjcv.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body style="margin:5px 0px 0px 5px"&gt;
    &lt;div style="font:bold 18pt verdana;"&gt;
        Positive Negative Bars
    &lt;/div&gt;
    &lt;hr style="border:solid 1px #000080; background:#000080" /&gt;
    &lt;div style="font:10pt verdana; margin-bottom:1.5em"&gt;
        &lt;a href="viewsource.jsp?file=&lt;%=request.getServletPath()%&gt;"&gt;View Source Code&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- ****** Here is the chart image ****** --&gt;
    &lt;%= viewer.renderHTML(response) %&gt;
&lt;/body&gt;
&lt;/html&gt;</code></div>
</div>
<br><hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div>
</body>
</HTML>
